<template>
  <div id="center">
    <div class="word_box" style="margin-bottom: 10px">
          <span>
            <icon class="text-icon" name="chart-pie"></icon>
          </span>
      <span class="fs-xl text mx-2 mb-1 pl-3">各专业报道人数</span>

    </div>
    <!--        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />-->
    <dv-capsule-chart :config="ranking" class="dv-scr-rank-board mt-1"/>
  </div>
</template>

<script>

export default {
  props: ["majorNumber"],
  data() {
    return {
      arr: [
        {
          name: 100,
          value: 100
        }
      ],
      ranking: {
        data: []
      },
    }
  },
  watch: {
    majorNumber: {
      deep: true,
      handler(n, o) {
        this.ranking.data = n
        this.ranking = {...this.ranking}
      }
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss">
#center {
  height: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //.down {
  //  padding: 6px 4px;
  //  padding-bottom: 0;
  //  width: 100%;
  //  display: flex;
  //  flex-direction: column;
  //  height: 100px;
  //  justify-content: space-between;
  //  .bg-color-black {
  //    border-radius: 5px;
  //  }
  //  .ranking {
  //    padding: 10px;
  //    width: 95%;
  //    display:flex;
  //    flex-direction: column;
  //    align-items: center;
  .word_box {
    //height: 10%;
    margin-top: 5%;

    span {
      font-size: 30px;

      icon {
        width: 20px;
      }
    }
  }

  .dv-scr-rank-board {
    width: 90%;
    height: 90%;
    font-size: 16px;
  }
}

//  }
//}
</style>
